Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপমেন্টের জন্য প্রয়োজনীয় বিভিন্ন স্টাইল প্রদান করে, তবে এটি সরাসরি আইকন স্টাইলিং সম্পর্কিত কোনো প্রি-বিল্ট ক্লাস সরবরাহ করে না। কিন্তু, আপনি CSS এবং Font Awesome বা অন্যান্য আইকন লাইব্রেরি ব্যবহার করে Custom Icon Styling করতে পারেন।
এখানে Custom Icon Styling করার কিছু উদাহরণ দেওয়া হলো, যা Pure.CSS ফ্রেমওয়ার্কের সঙ্গে ব্যবহার করা যেতে পারে।
১. Font Awesome Icons ব্যবহার করে Custom Icon Styling:
Font Awesome একটি জনপ্রিয় আইকন লাইব্রেরি যা সহজেই ওয়েবসাইটে ব্যবহার করা যায়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Font Awesome Icons ব্যবহার করা হয়েছে এবং CSS দিয়ে কাস্টম স্টাইলিং করা হয়েছে।
a) Font Awesome Icons ব্যবহার করা:
প্রথমত, আপনাকে Font Awesome এর সিএসএস ফাইলটি আপনার পৃষ্ঠাতে যুক্ত করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Custom Icon Styling</title>
<style>
.icon-style {
font-size: 40px;
color: #0078d4;
transition: transform 0.3s ease, color 0.3s ease;
}
.icon-style:hover {
transform: scale(1.2);
color: #005fa3;
}
</style>
</head>
<body>
<div>
<i class="fas fa-heart icon-style"></i> <!-- Heart Icon -->
<i class="fas fa-home icon-style"></i> <!-- Home Icon -->
<i class="fas fa-user icon-style"></i> <!-- User Icon -->
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- Font Awesome Icons: এখানে আমরা Font Awesome থেকে তিনটি আইকন (হৃদয়, হোম, ব্যবহারকারী) ব্যবহার করেছি।
- .icon-style ক্লাস: CSS এর মাধ্যমে আইকনগুলির স্টাইল নির্ধারণ করা হয়েছে, যেমন:
- font-size: আইকনের আকার বাড়ানো হয়েছে।
- color: আইকনের প্রাথমিক রঙ নির্ধারণ করা হয়েছে।
- transition: আইকনের স্টাইল পরিবর্তন করার সময় মসৃণ অ্যানিমেশন যুক্ত করা হয়েছে (যেমন হোভার করার সময় স্কেল বৃদ্ধি এবং রঙ পরিবর্তন)।
২. Custom Icon Styling with SVG:
এছাড়া আপনি SVG Icons (Scalable Vector Graphics) ব্যবহার করেও কাস্টম স্টাইলিং করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো যেখানে SVG আইকন ব্যবহার করা হয়েছে এবং CSS দিয়ে তার স্টাইলিং করা হয়েছে।
b) SVG Icon Custom Styling:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Custom SVG Icon Styling</title>
<style>
.svg-icon {
width: 50px;
height: 50px;
fill: #0078d4;
transition: transform 0.3s ease, fill 0.3s ease;
}
.svg-icon:hover {
transform: scale(1.2);
fill: #005fa3;
}
</style>
</head>
<body>
<div>
<!-- Heart Icon (SVG) -->
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<!-- Star Icon (SVG) -->
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 17.27l-5.18 3.09 1.64-6.91-5.46-4.73 6.92-.59L12 2l2.08 6.54 6.92.59-5.46 4.73 1.64 6.91L12 17.27z"/>
</svg>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- SVG Icons: এই উদাহরণে দুটি SVG আইকন ব্যবহার করা হয়েছে (হৃদয় এবং তারকা)। এই আইকনগুলিকে fill প্রপার্টি দিয়ে রঙ দেওয়া হয়েছে।
- .svg-icon ক্লাস: CSS এর মাধ্যমে এই আইকনগুলির আকার এবং রঙ কাস্টমাইজ করা হয়েছে। এছাড়া transition প্রপার্টি দিয়ে আইকনের scale এবং fill পরিবর্তন করার সময় মসৃণ অ্যানিমেশন প্রয়োগ করা হয়েছে।
৩. Icon Button Styling:
আইকন ব্যবহার করে একটি বাটন তৈরি করতে চান? নিচে একটি উদাহরণ দেওয়া হলো যেখানে আইকন এবং বাটন একসঙ্গে ব্যবহার করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Icon Button Styling</title>
<style>
.icon-button {
background-color: #0078d4;
color: white;
padding: 10px 20px;
font-size: 20px;
border: none;
border-radius: 5px;
display: inline-flex;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
.icon-button i {
margin-right: 8px; /* Space between icon and text */
}
.icon-button:hover {
background-color: #005fa3;
}
</style>
</head>
<body>
<button class="icon-button pure-button">
<i class="fas fa-thumbs-up"></i> Like
</button>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- .icon-button: এই ক্লাসের মাধ্যমে বাটনের জন্য ব্যাকগ্রাউন্ড কালার, প্যাডিং, বর্ডার রেডিয়াস, এবং স্টাইল নির্ধারণ করা হয়েছে।
- i tag: এখানে আইকনটি Font Awesome থেকে নেওয়া হয়েছে এবং এটি বাটনের টেক্সটের আগে রাখা হয়েছে।
- :hover: হোভার করার সময় বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন হবে।
Pure.CSS এর সঙ্গে Font Awesome বা SVG Icons ব্যবহার করে আপনি Custom Icon Styling করতে পারেন। CSS এর মাধ্যমে আপনি আইকনের আকার, রঙ, হোভার ইফেক্ট, বাটন স্টাইলিং ইত্যাদি কাস্টমাইজ করতে পারবেন। এইভাবে আপনি আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করতে পারবেন।
Read more
